<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>世界上最幸福的事</h3>
    <input type="checkbox"  id="all" >我全都要<br>
    <input type="checkbox"  class="thing" >吃饭<br>
    <input type="checkbox"  class="thing" >睡觉<br>
    <input type="checkbox"  class="thing" >旅游<br>
    <input type="checkbox"  class="thing" >学习<br>
</body>
<script>
    //1.获取元素
    var all=document.querySelector('#all');
    var things=document.querySelectorAll('.thing');

    //2.给all注册点击事件，选中/取消所有选项
    all.onclick = function () {
        for(var i=0;i<things.length;i++){
            things[i].checked=all.checked;
        }
    }
    //3.给things注册点击事件
    for(var i=0;i<things.length;i++){
        things[i].onclick = function () {
            //检测是不是所有的thing 都被选中了
            all.checked=thingsCheck(things);
        }
    }
    //4.实现thingsCheck
    function thingsCheck(things) {
        for(var i=0;i<things.length;i++){
            if(!things[i].checked){
                return false;
            }
        }
        return true;
    }
</script>
</html>